<template>
  <el-select :id="name" size="small" :placeholder="placeholder" :value="valueModel" :loading="loading"
             @clear="clearChecked" clearable>
    <el-option style="display: none" :value="valueModel" :label="label"></el-option>

    <div style="max-height: 200px;min-height: 160px">
      <div v-if="searchbar" style="width: 260px;">
        <div style="margin: 4px 8px;" v-show="showSearchbar">
          <el-input placeholder="模糊搜索" size="small" v-model="filterText" prefix-icon="fa fa-search" clearable
                    style="width: 100%;"></el-input>
        </div>
        <div class="pull-right text-primary" style="margin-right: 8px;cursor: pointer"
             @click="()=>{showSearchbar = !showSearchbar}">
          <i class="fa fa-search"></i>
        </div>
      </div>
      <div class="sea-scroll-bar">
        <el-tree ref="tree" node-key="id" accordion
                 @node-click="nodeClick"
                 :filter-node-method="filterNode"
                 :data="list">
          <span class="custom-tree-node" slot-scope="{node, data}">
            <span><i :class="data.icon"></i>{{ data[labelField] }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </el-select>
</template>

<script>
/* eslint-disable */
import Bamboo from "@/lang/bamboo";
import Layers from "@/lang/layers";
import {InputType} from "@/lang/fast-form";

/**
 * 下拉单选树形选择器
 *
 * 关于下拉数据的处理，还有进一步优化的空间，目前在组织树形机构的时候，会直接改动原始数据，
 * 一些特殊场合下，可能不希望组件改动数据，暂不决定处理这一问题，可以通过 Bamboo 工具类手动处理。
 */
export default {
    name: 'SmartSelectTree'
    , inject: ['fast_form']
    , props: {
        // 字段名
        name: {type: String}
        // 默认值
        , value: {type: [String, Number], default: undefined}
        // 树形数据
        , options: {type: Array, default: undefined}
        // 文字提示
        , placeholder: {type: String, default: ''}
        // 标签字段名
        , labelField: {type: String, default: 'label'}
        // 搜索栏
        , searchbar: {type: Boolean, default: false}

        // 请求参数
        , where: {type: Object, default: undefined}
        // 异步获取函数
        , provider: {type: Function, default: undefined}
    }
    , data() {
        return {
            // 值模型，用于计算的值，任何时候都不允许为空，避免 vue 联动失效
            valueModel: undefined
            // fast-form 表单接口
            , input: undefined
            // 显示的文本
            , label: ''
            // 属性数据列表
            , list: undefined

            // 过滤数值
            , filterText: ''
            // 展示搜索栏
            , showSearchbar: false

            // 数据加载状态
            , loading: undefined
        }
    }
    , watch: {
        value: {
            handler: function (val) {
                this.input.setFormatValue(val);
            }
        }
        , options: {
            handler: function (val) {
                this.setOptions(val)
            }
        }
        , where: {
            handler: function (val) {
                this.reload();
            }
        }
        /**
         * 数据过滤
         */
        , filterText(val) {
            this.$refs.tree.filter(val);
        }
    }
    , created() {
        let input = this.fast_form.getFormInput(this.name);

        // 覆盖重写默认的函数
        input.wrap(InputType.SelectTree);

        input.setDom(this);
        this.input = input;

        if (Layers.isNotBlank(this.options)) {
            // 下拉数据选项
            this.setOptions(this.options);
        } else if (Layers.isNotBlank(this.provider)) {
            // 查询远程数据字典
            this.reload();
        }

        // 首次渲染数据 & 触发数据联动
        input.setFormatValue(this.value);
    }
    , methods: {
        /**
         * 用户输入变换事件
         * @param val
         */
        onChange: function (val) {
            this.input.changeValue(val);
        }
        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        , onChangeValue: function (val) {
            this.valueModel = val;
            this.match();
        }
        /**
         * 过滤数据
         */
        , filterNode: function (value, data) {
            if (!value) {
                return true;
            } else {
                return data[this.labelField].indexOf(value) !== -1;
            }
        }
        /**
         * 匹配值
         */
        , match: function () {
            let val = this.valueModel;
            if (Layers.isEmpty(val) || Layers.isEmpty(this.list)) {
                this.label = '';
            } else {
                let node = Bamboo.getNodeById(this.list, val);
                this.label = node === undefined ? val : node[this.labelField];
            }
        }
        /**
         * 清除选中的节点
         */
        , clearChecked: function () {
            this.label = '';
            this.onChange('');
        }
        /**
         * 节点点击事件
         * @param node
         */
        , nodeClick(node) {
            this.label = node[this.labelField];
            this.onChange(node.id);
        }

        /**
         * 设置新的值
         */
        , setOptions: function (val) {
            this.list = Bamboo.isTree(val) ? val : Bamboo.toTree(val);
            this.match();
        }
        /**
         * 查询远程数据字典
         */
        , reload: function () {
            // 使用异步加载函数
            this.loading = true;
            this.provider(this.where).then(list => {
                this.options_ = list;
            }).finally(()=> {
                this.loading = false;
            });
        }
    }
}
</script>
